<template>
  <a-modal :width="1200" body-style="padding: 10px 20px" v-model:visible="showEditDialog" :title="currentItem.id ? '编辑采购单' : '新增采购单'" top="8vh" title-align="start" :mask-closable="false" @cancel="closedDialog">
    <div class="header">
      <p class="title">基础信息</p>
    </div>
    <a-form ref="formRef" :model="formInfo" :rules="rules">
      <a-row>
        <a-col :span="6">
          <a-form-item field="warehouse.warehouseCode" label="目的仓库：" label-col-flex="100px">
            <p v-if="currentItem.id">{{ formInfo.warehouse.warehouseName }}({{ formInfo.warehouse.warehouseCode }})</p>
            <a-select v-else v-model="formInfo.warehouse" value-key="warehouseCode" allow-search placeholder="">
              <a-option v-for="(item, i) in warehouseList" :key="i" :value="item" :label="item.warehouseName" />
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item field="supplier.id" label="供应商：" label-col-flex="100px">
            <p v-if="currentItem.id">{{ formInfo.supplier.supplierName }}({{ formInfo.supplier.supplierCode }})</p>
            <a-select v-else v-model="formInfo.supplier" value-key="id" placeholder="" allow-search @change="setDefaultPrice(purchaseItems)">
              <a-option v-for="(item, i) in supplierList" :key="i" :value="item" :label="item.supplierName" />
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item field="user.id" label="采购员：" label-col-flex="100px">
            <a-select v-model="formInfo.user" value-key="id" placeholder="" allow-search>
              <a-option v-for="(item, i) in userList" :key="i" :value="item" :label="item.userName" />
            </a-select>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="6">
          <a-form-item field="purchaseType" label="采购类型：" label-col-flex="100px">
            <p v-if="currentItem.id">{{ formInfo.purchaseType === 1 ? '普通采购' : '--' }}</p>
            <a-select v-else v-model="formInfo.purchaseType" placeholder="">
              <a-option :value="1" label="普通采购" />
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item field="settleType" label="结算方式：" label-col-flex="100px">
            <p v-if="currentItem.id">{{ formInfo.settleType === 1 ? '现结' : '月结' }}</p>
            <a-select v-else v-model="formInfo.settleType" placeholder="" allow-search>
              <a-option :value="1" label="现结" />
              <a-option :value="2" label="月结" />
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="附件：" label-col-flex="100px">
            <div class="flex-wrap">
              <a-tag style="margin-right: 10px; margin-bottom: 10px" v-if="formInfo.attachment" color="arcoblue" @close="formInfo.attachment = ''" closable>
                {{ formInfo.attachment }}
              </a-tag>
              <a-upload action="/" :custom-request="uplaodFile" :show-file-list="false">
                <template #upload-button>
                  <a-button size="mini">
                    <template #icon>
                      <icon-upload />
                    </template>
                    <template #default>上传附件</template>
                  </a-button>
                </template>
              </a-upload>
            </div>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="20">
          <a-form-item label="备注：" label-col-flex="100px">
            <a-textarea v-model="formInfo.remark" placeholder="" allow-clear />
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
    <div class="header flex-c" style="margin-top: 10px">
      <p class="title">采购订单明细</p>
      <a-button type="primary" size="small" @click="openChooseProductDialog">添加产品</a-button>
    </div>
    <a-table
      class="table-two-line show-border-table"
      ref="tableRef"
      row-key="id"
      :data="purchaseItems"
      :scroll="{
        x: '100%',
        y: 'calc(84vh - 360px)',
      }"
      :span-method="spanMethodAll"
      size="mini"
      :bordered="{ cell: true }"
      :pagination="false"
    >
      <template #columns>
        <a-table-column data-index="img" title="图片" :width="60" fixed="left">
          <template #cell="{ record }">
            <ImgPopover :src="record.productImg">
              <template #con>
                <a-image width="40" height="40" fit="contain" :src="record.productImg" />
              </template>
            </ImgPopover>
          </template>
        </a-table-column>
        <a-table-column title="产品名称" :width="120" fixed="left">
          <template #cell="{ record }">
            <TextLimit :val="record.productName" />
          </template>
        </a-table-column>
        <a-table-column data-index="sku" title="SKU" :width="100" fixed="left">
          <template #cell="{ record }">
            <ShowSpuDetailBySku :val="record.sku" :showLimit="false" />
          </template>
        </a-table-column>
        <a-table-column data-index="productSpecs" title="SKU规格" :width="100">
          <template #cell="{ record }">
            <TextLimit :val="getProductSpecs(record)" />
          </template>
        </a-table-column>
        <a-table-column title="店铺专属">
          <a-table-column data-index="shop" title="店铺" :width="100" cell-class="shopInfo">
            <template #cell="{ record, rowIndex }">
              <div class="shop-list" v-for="(item, i) in record.planItems" :key="i">
                <div class="item" style="width: 100px">
                  {{ item.shopName }}
                </div>
                <div class="item" style="width: 100px">
                  <TextLimit :val="item.msku || '--'" :rows="2" style="width: 89px" />
                </div>
                <div class="item" style="width: 130px">
                  <a-input-number @change="setDefaultPrice([record])" :precision="0" :min="1" v-model="item.purchaseAmt" style="width: 70px" placeholder="" />
                  <icon-double-down v-if="!(rowIndex == purchaseItems.length - 1 && i == record.planItems.length - 1)" class="edit-icon" @click="setGlobalAmt(item, rowIndex, i)" />
                  <icon-delete class="cursor" v-if="i != 0" style="margin-left: 5px" @click="removeItem(record, i)" />
                </div>
              </div>
            </template>
          </a-table-column>
          <a-table-column title="MSKU" :width="100" />
          <a-table-column :width="130">
            <template #title>
              <p>
                <span class="warningColor">*</span>
                <span>采购数量</span>
              </p>
            </template>
          </a-table-column>
        </a-table-column>
        <a-table-column title="采购数量" :width="70">
          <template #cell="{ record }">
            <p>{{ getAllPurAmt(record) }}</p>
          </template>
        </a-table-column>
        <a-table-column data-index="moq" title="起订量" :width="60" />
        <a-table-column title="预计交期" :width="160">
          <template #title>
            <p>
              <span class="warningColor">*</span>
              <span>预计交期</span>
            </p>
          </template>
          <template #cell="{ record, rowIndex }">
            <div class="cell flex-c" style="width: 160px">
              <a-date-picker v-model="record.gmtPlanDelivery" style="width: 120px" :disabledDate="(current: any) => dayjs(current).isBefore(dayjs())" />
              <icon-double-down v-if="rowIndex != purchaseItems.length - 1" class="edit-icon" @click="setGlobal(record, 'gmtPlanDelivery', rowIndex)" />
            </div>
          </template>
        </a-table-column>
        <a-table-column title="税率" :width="150">
          <template #title>
            <p>
              <span class="warningColor">*</span>
              <span>税率</span>
            </p>
          </template>
          <template #cell="{ record, rowIndex }">
            <div class="flex-c">
              <a-input-number v-model="record.rate" style="width: 90px" :min="0" :max="100" :precision="2" placeholder="" />
              <span>%</span>
              <icon-double-down v-if="rowIndex != purchaseItems.length - 1" class="edit-icon" @click="setGlobal(record, 'rate', rowIndex)" />
            </div>
          </template>
        </a-table-column>
        <a-table-column :width="150">
          <template #title>
            <div class="flex-c">
              <span class="warningColor">*</span>
              <a-select v-model="priceType" style="width: 110px" size="mini">
                <a-option :value="1">含税单价</a-option>
                <a-option :value="0">不含税单价</a-option>
              </a-select>
              <a-popconfirm content="该操作将重新获取报价信息，是否继续？" @ok="setDefaultPrice(purchaseItems)" type="error">
                <a-tooltip content="重新获取报价">
                  <icon-refresh class="highlight cursor" style="margin-left: 2px" />
                </a-tooltip>
              </a-popconfirm>
            </div>
          </template>
          <template #cell="{ record, rowIndex }">
            <div class="flex-c">
              <span>￥</span>
              <a-input-number v-model="record.price" :min="0" style="width: 90px" :precision="2" placeholder="" />
              <icon-double-down v-if="rowIndex != purchaseItems.length - 1" class="edit-icon" @click="setGlobal(record, 'price', rowIndex)" />
            </div>
          </template>
        </a-table-column>
        <a-table-column title="采购金额" :width="80">
          <template #cell="{ record }">
            <p class="price-type highlight">{{ priceType === 1 ? '含税' : '不含税' }}</p>
            <p>
              <span>￥</span>
              <span>{{ ((record.price || 0) * getAllPurAmt(record)).toFixed(2) }}</span>
            </p>
          </template>
        </a-table-column>
        <a-table-column title="单件工费" :width="150">
          <template #title>
            <div class="flex-c">
              <span class="warningColor">*</span>
              <span>单件工费</span>
              <a-popconfirm @popup-visible-change="globalSingleLaborCostsChange" @ok="updateSingleLaborCosts">
                <template #content>
                  <p style="margin-bottom: 10px">批量设置单件工费</p>
                  <div class="flex-c">
                    <a-select v-model="globalSingleLaborCostsType" style="width: 100px">
                      <a-option :value="1">固定值</a-option>
                      <a-option :value="2">单价占比</a-option>
                    </a-select>
                    <a-input-number v-model="globalSingleLaborCosts" style="width: 90px" :precision="2" placeholder="" />
                    <span>{{ globalSingleLaborCostsType === 1 ? '￥' : '%' }}</span>
                  </div>
                </template>
                <a-button type="text" size="mini" style="margin-left: 4px">批量</a-button>
              </a-popconfirm>
            </div>
          </template>
          <template #cell="{ record, rowIndex }">
            <div class="flex-c">
              <span>￥</span>
              <a-input-number :min="0" v-model="record.singleLaborCosts" style="width: 90px" placeholder="" :precision="2" />
              <icon-double-down v-if="rowIndex != purchaseItems.length - 1" class="edit-icon" @click="setGlobal(record, 'singleLaborCosts', rowIndex)" />
            </div>
          </template>
        </a-table-column>
        <a-table-column title="单件成本" :width="80">
          <template #cell="{ record }">
            <span>￥</span>
            <span>{{ ((record.singleLaborCosts || 0) + (record.price || 0)).toFixed(2) }}</span>
          </template>
        </a-table-column>
        <a-table-column title="合计成本" :width="80">
          <template #cell="{ record }">
            <span>￥</span>
            <span>{{ (((record.singleLaborCosts || 0) + (record.price || 0)) * getAllPurAmt(record)).toFixed(2) }}</span>
          </template>
        </a-table-column>
        <a-table-column data-index="salesmanName" title="销售员" :width="140">
          <template #title>
            <p>
              <span class="warningColor">*</span>
              <span>销售员</span>
            </p>
          </template>
          <template #cell="{ record, rowIndex }">
            <div class="cell flex-c" style="width: 132px">
              <a-select v-model="record.salesman" placeholder="" value-key="id" style="width: 90px" allow-search>
                <a-option v-for="(user, i) in userList" :key="i" :value="user" :label="user.userName" />
              </a-select>
              <icon-double-down v-if="rowIndex != purchaseItems.length - 1" class="edit-icon" @click="setGlobal(record, 'salesman', rowIndex)" />
            </div>
          </template>
        </a-table-column>
        <a-table-column data-index="remark" title="备注" :width="140">
          <template #cell="{ record, rowIndex }">
            <div class="cell flex-c" style="width: 132px">
              <a-input v-model="record.remark" style="width: 90px" placeholder="" />
              <icon-double-down v-if="rowIndex != purchaseItems.length - 1" class="edit-icon" @click="setGlobal(record, 'remark', rowIndex)" />
            </div>
          </template>
        </a-table-column>
        <a-table-column title="操作" :width="60" fixed="right">
          <template #cell="{ rowIndex }">
            <a-popconfirm v-if="purchaseItems.length > 1" content="确定是否移除?" @ok="purchaseItems.splice(rowIndex, 1)" type="error">
              <a-button type="text">移除</a-button>
            </a-popconfirm>
          </template>
        </a-table-column>
      </template>
    </a-table>
    <template #footer>
      <a-space>
        <a-button size="small" class="gray-outline" @click="closedDialog">取消</a-button>
        <a-button size="small" type="primary" @click="submitData(1)" :disabled="submitLoading">保存草稿</a-button>
        <a-button size="small" type="primary" @click="submitData(10)" :disabled="submitLoading">保存并提交审核</a-button>
      </a-space>
    </template>
  </a-modal>
  <!-- 选择产品 -->
  <ChoosePurchaseProduct v-if="showChooseProductDialog" :isShow="showChooseProductDialog" :shopId="shopId" @closed="showChooseProductDialog = false" @success="chooseProduct" />
</template>
<script lang="ts" setup>
  import { ref, onMounted, PropType } from 'vue'
  import useUserStore from '@/store/modules/user'
  import { upload } from '@/api/base'
  import { Message } from '@arco-design/web-vue'
  import { createPurchaseOrder, updatePurchaseOrder, findAvailableQuoteList } from '@/api/purchase'
  import dayjs from 'dayjs'
  import ChoosePurchaseProduct from './choosePurchseProduct.vue'
  import { parseJson } from '@/utils'
  import useBaseDataStore from '@/store/modules/base-data'

  onMounted(() => {
    if (props.currentItem.id) {
      getOrderDetail()
    } else {
      setDefaultData()
    }
  })
  const emit = defineEmits(['closed', 'success'])
  const props = defineProps({
    isShow: {
      type: Boolean,
      default: false,
    },
    userList: {
      type: Array as PropType<Array<any>>,
      default: () => [],
    },
    warehouseList: {
      type: Array as PropType<Array<any>>,
      default: () => [],
    },
    supplierList: {
      type: Array as PropType<Array<any>>,
      default: () => [],
    },
    currentItem: {
      type: Object,
      default: () => {},
    },
  })
  const rules = ref({
    'warehouse.warehouseCode': [{ required: true, message: '请选择目的仓库' }],
    'supplier.id': [{ required: true, message: '请选择供应商' }],
    'user.id': [{ required: true, message: '请选择采购员' }],
  })
  const userStore = useUserStore()
  const showEditDialog = ref(props.isShow)
  const formInfo = ref<any>({})
  const purchaseItems = ref<Array<any>>([])
  const submitLoading = ref(false)
  const showChooseProductDialog = ref(false)
  const formRef = ref()
  const quoteMap = ref<any>({})
  const priceType = ref(1)
  const globalSingleLaborCostsType = ref(1)
  const globalSingleLaborCosts = ref()
  const useBaseData = useBaseDataStore()
  const shopId = ref()

  // 打开添加产品，限制只可以选择共享店铺
  async function openChooseProductDialog() {
    await useBaseData.getShopListAndShare()
    shopId.value = useBaseData.shopListAndShare.find((el: any) => el.share)?.sellerMarketId
    showChooseProductDialog.value = true
  }
  // 获取供应商详情
  async function getOrderDetail() {
    formInfo.value = JSON.parse(JSON.stringify(props.currentItem))
    if (formInfo.value.supplierId) {
      formInfo.value.supplier = {
        id: formInfo.value.supplierId,
        supplierName: formInfo.value.supplierName,
        supplierCode: formInfo.value.supplierCode,
      }
    }
    if (formInfo.value.warehouseCode) {
      formInfo.value.warehouse = {
        warehouseCode: formInfo.value.warehouseCode,
        warehouseName: formInfo.value.warehouseName,
      }
    }
    if (formInfo.value.purchaseUid) {
      formInfo.value.user = {
        id: formInfo.value.purchaseUid,
        userName: formInfo.value.purchaseUname,
      }
    }
    let items = JSON.parse(JSON.stringify(formInfo.value.billItems))
    purchaseItems.value = items.map((el: any) => {
      if (el.salesmanId) {
        el.salesman = {
          id: el.salesmanId,
          userName: el.salesmanName,
        }
      }
      return el
    })
  }
  // 显示sku规格
  function getProductSpecs(item: any) {
    let productSpecs = item.productSpecs ? parseJson(item.productSpecs, []) : []
    return productSpecs.map((el: any) => el.valueCn)?.join('*') || '--'
  }
  // 一键设置单件工费
  function updateSingleLaborCosts() {
    purchaseItems.value.forEach((child: any) => {
      let _price = Number(child.price || 0)
      let val = globalSingleLaborCostsType.value === 1 ? globalSingleLaborCosts.value : (Number(globalSingleLaborCosts.value || 0) / 100) * _price
      child.singleLaborCosts = val
    })
  }
  function globalSingleLaborCostsChange() {
    globalSingleLaborCosts.value = null
    globalSingleLaborCostsType.value = 1
  }
  // 添加初始化数据
  function setDefaultData() {
    let defaultUser = {
      id: userStore.userId,
      userName: userStore.userName,
    }
    formInfo.value.user = { ...defaultUser }
    formInfo.value.settleType = 1
    formInfo.value.purchaseType = 1
  }

  // 上传附件
  async function uplaodFile(options: any) {
    let { fileItem } = options
    let formData = new FormData()
    formData.append('file', fileItem.file)
    const res: any = await upload(formData)
    if (res?.data?.publicUrl) {
      formInfo.value.attachment = res.data.publicUrl
    }
  }
  //设置全局
  function setGlobal(item: any, key: string, rowIndex: number) {
    const newVal = item[key]
    purchaseItems.value.forEach((el: any, index: number) => {
      if (index > rowIndex) {
        el[key] = newVal
      }
    })
  }
  // 设置全局采购数量
  function setGlobalAmt(row: any, parentIndex: number, childIndex: number) {
    purchaseItems.value.forEach((el: any, i: number) => {
      el.planItems.forEach((item: any, j: number) => {
        if (i > parentIndex || (i == parentIndex && j > childIndex)) {
          item.purchaseAmt = row.purchaseAmt
        }
      })
    })
    setDefaultPrice(purchaseItems.value)
  }
  // 添加产品的信息
  function setItemInfoByProduct(item: any, planItem: any) {
    let obj: any = {
      productId: item.productId,
      productImg: item?.productImgs?.[0],
      productName: item.productName,
      productSpecs: item.productSpecs,
      sku: item.sku,
      spu: item.spu,
      brandId: item.brandId,
      brandName: item.brandName,
      cateId: item.cateId,
      cateName: item.cateName,
      moq: 1,
      remark: item.productRemark,
      planItems: [planItem],
    }
    // 销售员
    if (item.salesmans?.[0]?.salesmanId) {
      obj.salesman = {
        id: item.salesmans?.[0]?.salesmanId,
        userName: item.salesmans?.[0]?.salesmanName,
      }
    }
    return obj
  }
  function chooseProduct(list: Array<any>) {
    list.map((el: any) => {
      let planItem = {
        msku: el.msku,
        sellerId: el.sellerId,
        shopId: el.shopId,
        shopName: el.shopName,
        marketplaceId: el.marketplaceId,
      }
      // 判断是否已经存在相同的sku
      let currentPurchaseItem = purchaseItems.value.find((item: any) => item.sku == el.sku)
      if (!currentPurchaseItem) {
        // 不存在相同sku直接增加一个明细
        purchaseItems.value.push(setItemInfoByProduct(el, planItem))
      } else {
        // 存在相同sku的情况，只有不同店铺才可以添加
        let hasItem = currentPurchaseItem.planItems.some((item: any) => item.sellerId == el.sellerId && item.marketplaceId == el.marketplaceId)
        if (!hasItem) currentPurchaseItem.planItems.push(planItem)
      }
    })
    setDefaultPrice(purchaseItems.value)
  }
  // 查询报价列表
  async function getQuoteList() {
    quoteMap.value = {}
    let list: Array<any> = []
    purchaseItems.value.forEach((el: any) => {
      let amt = getAllPurAmt(el)
      if (formInfo.value.supplier?.id && el.sku && amt) {
        list.push({
          purchaseAmt: amt,
          sku: el.sku,
          spu: el.spu,
          supplierId: formInfo.value.supplier?.id,
        })
      }
    })
    if (!list.length) return
    let res: any = await findAvailableQuoteList({ quoteItems: list })
    let quoteList = res?.data || []
    quoteList.forEach((el: any) => {
      let key = el.sku + el.supplierId
      quoteMap.value[key] = el
    })
  }
  // 设置默认的采购报价
  async function setDefaultPrice(list: Array<any>) {
    let supplierId = formInfo.value.supplier?.id
    if (!supplierId) return
    await getQuoteList()
    // 全局查询替换
    let newList = list.length ? list : purchaseItems.value
    // 根据价格类型获取报价的含税或不含税单价
    let priceKey = priceType.value === 1 ? 'taxPrice' : 'price'
    newList.forEach((el: any) => {
      let detail = quoteMap.value[el.sku + supplierId] || {}
      let quotePrice = detail.quoteItems?.[0]?.[priceKey]

      el.moq = detail.moq || 1
      el.rate = quotePrice ? detail.parTaxRate : el.rate
      el.price = quotePrice || el.price
      if (detail.deliveryDays) {
        el.gmtPlanDelivery = dayjs()
          .add(Number(detail.deliveryDays || 0), 'day')
          .format('YYYY-MM-DD')
      }
    })
  }
  // 关闭
  function closedDialog() {
    showEditDialog.value = false
    emit('closed')
  }

  // 校验
  async function validInfo() {
    let valid = await formRef.value.validate((valid: any) => {
      return valid
    })
    if (valid) return false
    if (!purchaseItems.value.length) {
      Message.error('请最少增加一个产品')
      return false
    }
    for (let el of purchaseItems.value) {
      for (let item of el.planItems) {
        if (!item.purchaseAmt) {
          Message.error('采购量必填')
          return false
        }
      }
      if (!(el.price || el.price === 0)) {
        Message.error('单价必填')
        return false
      }
      if (!el.gmtPlanDelivery) {
        Message.error('预计交期必填')
        return false
      }
      if (!(el.singleLaborCosts || el.singleLaborCosts === 0)) {
        Message.error('单件工费必填')
        return false
      }
      if (!el.salesman?.id) {
        Message.error('销售员必填')
        return false
      }
    }
    return true
  }
  function saveItemData() {
    let list = JSON.parse(JSON.stringify(purchaseItems.value))
    list.forEach((el: any) => {
      el.salesmanId = el.salesman.id
      el.salesmanName = el.salesman.userName
      el.purchaseAmt = getAllPurAmt(el)
      el.priceType = priceType.value
      delete el.salesman
    })
    return list
  }
  // 保存信息
  async function submitData(status: number) {
    let valid = await validInfo()
    if (!valid) return false

    let params: any = {
      attachment: formInfo.value.attachment,
      settleType: formInfo.value.settleType,
      purchaseType: formInfo.value.purchaseType,
      remark: formInfo.value.remark,
      purchaseUid: formInfo.value.user?.id,
      purchaseUname: formInfo.value.user?.userName,
      warehouseCode: formInfo.value.warehouse?.warehouseCode,
      warehouseName: formInfo.value.warehouse?.warehouseName,
      supplierCode: formInfo.value.supplier?.supplierCode,
      supplierName: formInfo.value.supplier?.supplierName,
      supplierId: formInfo.value.supplier?.id,
      purchaseItems: saveItemData(),
      status: status,
    }
    submitLoading.value = true
    let res: any
    if (!props.currentItem.id) {
      res = await createPurchaseOrder(params)
    } else {
      params.id = formInfo.value.id
      res = await updatePurchaseOrder(params)
    }
    submitLoading.value = false
    if (!res) return false
    Message.success('保存成功')
    emit('success')
    closedDialog()
  }
  // 获取sku采购数量合计
  function getAllPurAmt(row: any) {
    let num = 0
    row.planItems?.forEach((el: any) => {
      num += Number(el.purchaseAmt || 0)
    })
    return num
  }
  // 合并单元格
  function spanMethodAll(option: any) {
    let { column } = option
    if (column.dataIndex === 'shop') {
      return { rowspan: 1, colspan: 3 }
    }
  }
  // 移除明细
  function removeItem(row: any, i: number) {
    row.planItems.splice(i, 1)
    setDefaultPrice([row])
  }
</script>
<style lang="less" scoped>
  .arco-form-item {
    margin-bottom: 10px;
  }
  .header {
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 10px;
    border-left: 3px solid rgba(var(--primary-6), 0.5);
    padding-left: 10px;
    .title {
      margin-right: 30px;
      width: 90px;
    }
  }
  .edit-icon {
    font-size: 16px;
    margin-left: 5px;
    cursor: pointer;
  }
  .price-type {
    font-size: 12px;
    transform: scale(0.82);
    position: relative;
    left: -4px;
  }
  :deep(td.shopInfo .arco-table-cell) {
    padding: 0 !important;
  }
  .shop-list {
    display: flex;
    border-bottom: 1px solid var(--color-neutral-3);
    &:last-child {
      border-bottom: none;
    }
    .item {
      height: 56px;
      display: flex;
      align-items: center;
      padding: 0 5px;
      border-right: 1px solid var(--color-neutral-3);
      &:last-child {
        border-right: none;
      }
    }
  }
</style>
